@import "./com";
header {
    .hdr_top {
        display: flex;
        justify-content: space-around;
        margin-top: vw(50);
        text-align: center;
        line-height: vw(57);
        p:nth-of-type(1) {
            width: vw(120);
            height: vw(57);
            border: 2px solid $col;
            border-radius: vw(30);
        }
        img {
            width: vw(60);
            height: vw(50);
        }
    }
}

main {
    width: vw(705);
    margin: vw(25) auto 0;
    // 大图
    .hua {
        width: vw(705);
        img {
            width: vw(705);
        }
    }
    // 价格
    .jia {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
            font-size: vw(72);
            color: $col;
        }
        a {
            button {
                width: vw(115);
                height: vw(60);
                border: none;
                background-color: $col;
                border-radius: vw(20);
                color: #fff;
            }
        }
    }
    // 好评
    .hao {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: vw(55);
        p {
            font-size: vw(30);
            img {
                width: vw(38);
                height: vw(38);
                vertical-align: middle;
            }
            i {
                color: $col;
            }
        }
        a {
            font-size: vw(26);
            color: #898989;
        }
    }
    //适合用户
    .shi {
        width: vw(705);
        background-color: $col;
        a {
            height: vw(65);
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
                font-size: vw(30);
                color: #fff;
            }
        }
    }
    // 店铺
    .dian {
        ul {
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                a {
                    img {
                        width: vw(178);
                        height: vw(178);
                    }
                }
                .oo {
                    p:nth-of-type(1) {
                        font-size: vw(30);
                    }
                    i {
                        font-size: vw(26);
                        color: $hui;
                        img {
                            width: vw(195);
                            height: vw(35);
                            vertical-align: middle;
                        }
                    }
                    p:nth-of-type(2) {
                        color: $hui;
                        font-size: vw(24);
                    }
                    p:nth-of-type(3) {
                        color: $col;
                        font-size: vw(20);
                    }
                }
                a {
                    button {
                        width: vw(160);
                        height: vw(64);
                        border: none;
                        background-color: $col;
                        border-radius: vw(20);
                        color: #fff;
                    }
                }
            }
        }
    }
}

// 底部导航栏
nav {
    position: fixed;
    bottom: 0;
    margin-top: vw(14);
    width: vw(750);
    .nav_di {
        width: 100%;
        ul {
            display: flex;
            width: 100%;
            li {
                flex-basis: 25%;
                display: inline-block;
                padding-left: vw(57);
                a {
                    display: flex;
                    width: vw(77);
                    height: vw(77);
                    img {
                        width: 100%;
                        vertical-align: auto;
                    }
                }
            }
        }
    }
}